body,ul,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend,input,nav,figure,figcaption{margin:0; padding:0;}
ul,li,ol{list-style:none;}
img,fieldset{border:0; }
img{display:block;}
a{text-decoration:none; color:#333;}
h1,h2,h3,h4,h5,h6{font-weight:100;}
body{ font-family:"微软雅黑";}
input,a{outline:none;}


html,body{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
    flex-flow: column;
}
header{
    height: 1.16rem;
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    border-bottom:none; 
}

header .search{
    width: 6rem;
    height: .6rem;
    margin: .4rem .75rem 0 .75rem;
    /* background-color: rgb(211, 183, 183); */
}
header .search input{
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    border: none;
    outline: none;
    border-radius: .3rem;
    text-indent: .73rem;


}
header .search input::placeholder{
    font-size: .27rem;
    color:#9e9e9e;
    /* text-indent: .73rem; */
}

#mask-w{
    flex: 1;
    display: flex;
    flex-direction: column;
}
#mask{
    width: 100%;
    height: calc(100% - 1.16rem);
    background-color:rgba(0,0,0,.4);
    position: absolute;
    display: none;
    z-index: 101;
}
#mask ul {
    background-color: #fff;
   width: 70%;
   border-radius: .1rem;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   max-height:6rem ;

}
#mask ul li{
    /* border: 1px solid #000; */
    font-size: .25rem;
    padding: 0 .2rem;
    margin: 0 .2rem;
    height: .6rem;
    border-bottom:.01rem solid rgb(185, 185, 185);
    line-height: .6rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#mask ul li:nth-last-child(1){
    border:none;    
}
main{
    flex: 1;
    overflow: auto;
    display: flex;
    padding-bottom:.1rem; 
    box-sizing: border-box;
    position: relative;
}
main::-webkit-scrollbar{
    display: none;
}
main #nav{
    width: 1.6rem;
    background-color: #f4f4f4;
}
main #nav li{
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    color: #1b1b1b;
    font-size: .25rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
main #option{
    flex: 1;
    overflow: auto;
    /* background-color: rgb(255, 255, 255); */
    position: relative;

}

main #option {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    background-color: #fff;
}
main #option >li{
   width: 1.7rem;
   height: 2.2rem;
   /* background-color: rgb(251, 237, 237); */
   margin:.1rem .1rem;
   display: flex;
   flex-direction: column;
}
main #option >li img{
    width: 1.7rem;
    height: 1.5rem;
    /* background-color: rgb(161, 230, 144); */
    
}
main #option >li p{
    height: .33rem;
    font-size: .25rem;
    line-height: .33rem;
    text-align: center;
    color:#666666;
}
/* footer+++++++++++++++++++++++++++++== */
footer{
    display: flex;
    height: 1rem;
    box-sizing:border-box;
    border-top: 1px solid #EEEEEE;
    width: 100%;
    box-sizing: border-box;
    padding: 0.13rem 0 0.21rem;
}
footer a {
    width: 20%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
footer a img{
    height: .44rem;
}
footer a span{
    color:#7a7a7a;
    font-size: .19rem;

}
footer a:nth-of-type(2) span{
    color: #37ba84;
}